<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h1>{{NewText}}{{num}}</h1>
        <input type="text" v-model.trim='num' :xxx='num'>
        <input type="text" :value='fullName'>
        <button @click='fn2'>按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        /* 
            v-model 类似react 受控组件
            -里面可以书写函数表达式

            v-bind 强制数据绑定 功能: 指定变化的属性值 简写 :XXX='Vue属性(data/methods中定义的属性方法)'
                -可以添加DOM元素属性
                -也可以修改已有的属性值 
                -可以读取等号后面的Vue变量 

            v-on:事件名='定义的方法' 简写 @事件名='方法'

        */

        /* 
            谈谈插值语法 {{}} 双括号直接书写在HTML页面中 vue会自动解析双括号中的属性
                -里面可以书写表达式 

            谈谈指令语法
                以v-为前缀 当表达式对应的值发生变化后，将响应式的作用于Dom，从而影响视图层
                
                v-model='' 双向绑定 vue中的数据会跟html中的数据进行绑定(修改一个两个都会改变)

                v-bind 强制数据绑定 功能: 指定变化的属性值 简写 :XXX='Vue属性(data/methods中定义的属性方法)'
                    -可以添加DOM元素属性
                    -也可以修改已有的属性值 
                    -可以读取等号后面的Vue变量

                v-on:事件名='定义的方法' 简写 @事件名='方法'
        

            MVVM Vue设计模式 
              - M Model 数据层（data）
              - V View  视图层（DOM） 
              - VM ViewModel 视图模型层（Vue会做的事情）
                - Data Bindings 数据绑定：将数据由数据层流向视图层（vm做的）
                  - 操作DOM元素的value或textContent属性 
                - DOM Listeners 事件监听：将数据由视图层流向数据层 
                  - 给元素绑定事件input事件，来收集输入的数据，更新数据层数据 
                - 双向数据流 
        */

        const NewText = 'hello world'
        new Vue({
            //必须使用el 获取真实DOM元素
            el: '#root',
            //存储的属性值
            data: {
                NewText,
                num: "1"
            },
            //定义的函数都放这
            methods: {
                // fn() {
                //     console.log(111, arguments)
                //     console.log(arguments[0])
                // },
                fn2() {
                    console.log(this.num)
                    this.num + 1
                }
            },
            computed: {
                fullName: {
                    get: function () {
                        return this.num + this.num
                    },
                    set: function (value) {
                        console.log(value)
                        var names = value[0]
                        this.num = names / 2
                    }
                }
            }

        })
    </script>
</body>

</html>